<template>
  <div>
    <el-divider content-position="left">菜单列表</el-divider>
    <el-button style="margin-right: 90%" type="text" @click="dialog = true"
      >添加</el-button
    >
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="100"> </el-table-column>
        <el-table-column prop="subName" label="科目" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      title="添加目录"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="目录名称" :label-width="formLabelWidth">
            <el-input v-model="form.subName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getSubList } from "@/api/sub";
import { deleteSub } from "@/api/sub";
import { addSub } from "@/api/sub";
export default {
  data() {
    return {
      tableData: [
        {
          id: "",
          subName: "",
        },
      ],
      table: false,
      dialog: false,
      loading: false,
      form: {
        subName: "",
      },
      formLabelWidth: "80px",
      timer: null,
    };
  },
  methods: {
    getMenuList() {
      getSubList().then((res) => {
        this.tableData = res.data;
      });
    },

    handleClick(row) {
      //console.log(row);
      const c = {
        id: row.id,
      };
      deleteSub(c).then((res) => {
        if (res.code === 0) {
          this.getMenuList();
          this.$message({
            showClose: true,
            message: "删除成功",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "warning",
          });
        }
      });
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            //location.reload();
            addSub(this.form).then((res) => {
              if (res.code === 0) {
                this.getMenuList();
              }
            });

            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
  },
  created() {
    this.getMenuList();
  },
};
</script>
